<script>
import bigImg from "@/components/public/bigImg.vue";
export default {
  components: { bigImg },
  name: "",
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  props: {
    propImgs: {
      typeof: String,
      default: "",
    },
  },
  setup() {},
  methods: {
    emitFn() {
      let url = "";
      if (this.fileList.length > 0) {
        let arr = [];
        console.log(this.fileList);
        for (let item of this.fileList) {
          if (item.response.code == 1) {
            arr.push(item.response.data.src);
          }
        }
        url = arr.join(",");
      }
      this.$emit("ok", url);
    },
    handlePictureCardPreview(uploadFile) {
      this.dialogImageUrl = uploadFile.url;
      this.dialogVisible = true;
    },
  },
  mounted() {},
  created() {
    if (this.propImgs) {
      let imgArr = this.propImgs.split(",");
      for (let item of imgArr) {
        this.fileList.push({
          name: "",
          url: item,
          response: { data: { src: item }, code: 1 },
        });
      }
    }
  },
};
</script>
<template>
  <div>
    <el-upload
      v-model:file-list="fileList"
      :action="$apis + '/common/Upload/UpImg'"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="emitFn"
      :on-success="emitFn"
    >
      <el-icon>
        <span class="upImgIcon iconfont icon-shangchuan"></span>
      </el-icon>
    </el-upload>
    <bigImg
      :src="dialogImageUrl"
      @close="dialogVisible = false"
      v-if="dialogVisible"
    ></bigImg>
  </div>
</template>
<style scoped lang="less"></style>
